<template>
  <div>
    <div class="header">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>

    <div>
      <button @click="change('36')">大</button>
      <button @click="change('24')">中</button>
      <button @click="change('12')">小</button>
    </div>
  </div>
</template>
 
<script setup lang='ts'>
import { reactive, ref, nextTick } from 'vue'
// 全局的字体大小 添加这个变量就可以了 并把这个变量挂载到根元素上 这样任何页面都可以使用
/* 
:root {
  --size: 16px;
}
*/

// 方法一：使用vueUse插件
// npm i @vueuse/core
/* import {useCssVar} from "@vueuse/core";
const change = (num: string) => {
  const size = useCssVar("--size")
  size.value = num + 'px'
} */

// 方法二：
const change = (num: string) => {
  // 两个API方法名称不太一样
  
  // getPropertyValue 获取css变量的值
  // setProperty 设置css变量的值

  // const size = document.documentElement.style.getPropertyValue('--size')
  document.documentElement.style.setProperty('--size', num + 'px')
}

</script>
 
<style scoped lang='less'>
:root {
  --size: 16px;
}

.header {
  display: flex;
  div {
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    font-size: var(--size);
    // px 固定的单位  不会随着屏幕的变化而变化
    // rem 相对单位  会随着屏幕的变化而变化   r = root  1rem = html font-size  若根元素的字体大小是16px  则1rem = 16px
    // 具体屏幕 适合多少html-font-size 无从得知 所以需要动态计算需要引入淘宝的flexible.js进行动态计算

    // vw vh 相对于视口viewport的宽高进行控制的   例如375屏幕 1vw = 3.75px
    // 百分比是相对于父元素的宽度和高度进行控制的
    // UI 设计稿给的px 需要进行转换 px to viewport 插件（postCss）
    &:first-child {
      width: 100px;
      background-color: red;
    }
    &:nth-child(2) {
      flex: 1;
      background-color: green;
    }
    &:last-child {
      width: 100px;
      background-color: blue;
    }
  }
}
</style>
